/* Clear Floast after the columns */
.row{
    display:flex;
    box-shadow: 0px 12px 2px lightgrey;
    width: 100%;
    border: 0px solid;
    margin: auto;
    padding: 0px;
}

.sub_row{
    display:inline-block;
    width: 100%;
    border: 0px solid;
    margin: auto;
    padding: 0px;
}

/* Create two equal columns that floats next to each other */
.column{
    float:left;
    width: 40%;
    height: 80px;
    padding: 10px;
    background-color:white;
    
    
}
.column1{
    float:right;
    width: 50%;
    height: 80px;
    padding: 10px;
    background-color:white;
    text-align: center;
    vertical-align: middle;
    
}
.sub_column1{
    float:right;
    width: 100%;
    height: 20px;
    padding: 10px;
    background-color:white;
    text-align: center;
    vertical-align:bottom;
    
}


.column3{
    float:right;
    width: 10%;
    height: 80px;
    padding: 10px;
    background-color:white;
    text-align: right;
    vertical-align: middle;
    
}
.details_row{
    display:flex;
    width: 100%;
    border: 0px solid;
    margin: auto;
    padding: 10px;
    background-color:whitesmoke;
}

.details_column{
    float:right;
    width: 70%;
    padding: 0px;
    background-color:whitesmoke;
}

.list_column{
    float:right;
    width: 30%;
    padding: 0px;
    background-color:white;
    text-align: left;
    
}

.user_details_column{
    float:right;
    width: 75%;
    padding: 0px;
    background-color:white;
}

.user_details_column_1{
    float:right;
    width: 70%;
    padding: 0px;
    background-color:white;
}
.user_list_column{
    float:right;
    width: 20%;
    height: 600px;
    padding: 0px;
    background-color:darkcyan;
    text-align: left;
    overflow: scroll;
    
    
}
.user_list_column_1{
    float:right;
    width: 25%;
    height: 600px;
    padding: 0px;
    background-color:darkcyan;
    text-align: left;
    overflow: scroll;
    
    
}


.details_row1{
    display:block;
    width: 100%;
    border: 0px solid;
    margin: auto;
    padding: 10px;
    align-items: center;
    text-align: center;
    column-gap: 60px;
}

.details_row2{
    display:flex;
    width: 100%;
    border: 0px solid;
    padding: 10px;
    text-align: center;
    column-gap: 40px;
    
}
.details_row3{
    display:flex;
    width: 100%;
    border: 0px solid;
    padding: 10px;
    text-align: center;
    column-gap: 50px;
    margin: -100px 0px 0px 0px;
    
    
}
.user_details_row3{
    display:flex;
    width: 100%;
    border: 0px solid;
    padding: 10px;
    text-align: center;
    column-gap: 50px;
    margin: 0px 0px 0px 0px;
    
    
}
.bottom_row{
    display: flex;
    width: 98%;
    margin: auto;
    padding: 10px;
}
.bottom_column{
    float:left;
    width: 30%;
    height: 200px;
    padding: 10px;
    border-radius: 25px;
    background-color:white;
    text-align: center;
    font-weight: 700;
    
}

.details_column1{
    float:left;
    width: 100%;
    padding: 0px;
    background-color:whitesmoke;
    
}

.frame_style{
    width: 100%;
    padding: 0px;
    background-color:whitesmoke;

    
}
.picture_column{
    float:left;
    width: 180px;
    height: 200px;
    padding: 10px;
    border-radius: 25px;
    background-color:lightgrey;
    column-gap: 50px;
    
}
.text_scroll{
    float:left;
    width: 200px;
    height: 200px;
    padding: 10px;
    border-radius: 25px;
    font-weight: 700;
    /*background-color:lightgrey;*/
    overflow-x: hidden;
    overflow-y: auto;
    text-align: justify;
       
}

.picture_column_gap{
    float:left;
    width: 30px;
 }
 .normal_column{
    display: flex;
    float:left;
    width: 200px;
    height: 250px;
    padding: 10px;
    border-radius: 25px;
    background-color:blue;
    color: white;
    font-weight: 700;
    font-size: 30px;
    vertical-align:middle;
    text-align: center;

}

#category{
    display: flex;
    float:left;
    width: 200px;
    height: 200px;
    padding: 10px;
    border-radius: 20px;
    background-image: linear-gradient(to bottom right, whitesmoke, skyblue);
    color: blue;
    font-weight: 700;
    font-size: 16px;
    align-items: center;
    vertical-align: middle;
    text-align: center;
}

#category:hover {
    background-image: linear-gradient(to top left, red, yellow);
    color:white;
}

 .column_gap{
    float:left;
    width: 10px;
 }


.details_column1{
    float:none;
    width:100%;
    padding: 0px;
    background-color:whitesmoke;
    text-align: center;
    align-items: center;
        
}
.list_column1{
    position: sticky;
    float:left;
    width: 30%;
    padding: 0px;
    background-color:whitesmoke;
    
}

.round_corner{
    border-radius: 25px;
    background-color:lightgrey;
    background-position: right top;
    padding: 10px;
    width: 90%;
    height: 600px;
}

.text_column_style{
    border: solid black 1px;
    background-color: lightgrey;
    column-count: 3;
    column-gap: 40px;
}